import { defineComponent, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElCard, ElSpace, ElButton, ElTable, ElTableColumn, ElLink } from 'element-plus'
import AliIcon from '~/components/AliIocn'

export default defineComponent({
  props: ['cancel', 'id'],
  emits: ['handSpeciallyInfo'],
  setup(props, { emit }) {
    const store = useStore()
    const state = reactive({
      tableList: [{ name: '测试' }]
    })
    //  列表数据
    const index = async () => {
      const { code, data } = await store.dispatch('base/GetBasebuildbatchTotalInfo', {
        assetBaseBuild: props?.id
      })
      if (code === 200) {
        state.tableList = data
      }
    }
    //  跳转到需求详情
    const onHandleChange = (row: any) => {
      emit('handSpeciallyInfo', row)
      props?.cancel()
    }

    onMounted(() => {
      props?.id && index()
    })

    return () => {
      return (
        <ElCard
          v-slots={{
            header: () => (
              <ElSpace class="info-card-header-space">
                <div>特批需求摘牌统计</div>
                <ElButton text type="primary" onClick={props.cancel}>
                  返回上一级&nbsp;
                  <AliIcon type="icon-fanhuishangyiji" />
                </ElButton>
              </ElSpace>
            )
          }}
        >
          <ElTable data={state.tableList} border>
            <ElTableColumn
              type="expand"
              v-slots={{
                default: ({ row }: { row: any }) => (
                  <div>
                    <div style="padding: 10px 0; font-size: 16px;">
                      特批需求摘牌结果分布{row.name}
                    </div>
                    <ElTable data={row.childList}>
                      <ElTableColumn
                        label="需求批次"
                        prop="batchNum"
                        align="center"
                        v-slots={{
                          default: (scope: any) => (
                            <ElLink type="primary" onClick={() => onHandleChange(scope.row)}>
                              {scope.row.batchNum}
                            </ElLink>
                          )
                        }}
                      ></ElTableColumn>
                      <ElTableColumn label="需求数" prop="reqNum" align="center"></ElTableColumn>
                      <ElTableColumn label="匹配数" prop="matchNum" align="center"></ElTableColumn>
                      <ElTableColumn label="摘牌数" prop="delistNum" align="center"></ElTableColumn>
                      <ElTableColumn label="中标数" prop="baddNum" align="center"></ElTableColumn>
                      <ElTableColumn
                        label="流标数"
                        prop="abortiveNum"
                        align="center"
                      ></ElTableColumn>
                    </ElTable>
                  </div>
                )
              }}
            ></ElTableColumn>
            <ElTableColumn label="需求批次" prop="batchNum" align="center"></ElTableColumn>
            <ElTableColumn label="特批需求数" prop="reqNum" align="center"></ElTableColumn>
            <ElTableColumn label="摘牌数" prop="delistNum" align="center"></ElTableColumn>
            <ElTableColumn label="中标数" prop="baddNum" align="center"></ElTableColumn>
            <ElTableColumn label="流标数" prop="abortiveNum" align="center"></ElTableColumn>
          </ElTable>
        </ElCard>
      )
    }
  }
})
